<template>
<q-page class="fit" style="padding:10px">
  <QuoteList ref="quote-list" :quoteList="quoteList" :isLoad="isLoad" :noMoreQuote="noMoreQuote" @refresh-quote="handleRefreshQuote"></QuoteList>
  <create-quote :isCreateDialog="isCreateDialog"  @update="handleCreateDialog" ></create-quote>
  <q-page-sticky v-if="$User.isAdmin()" position="bottom-right" :offset="fabPos">
    <q-btn dense rounded class="shadow-6 q-px-md translucence" color="white" @click="handleCreateDialog" draggable stack text-color="primary">
        <q-icon size="15px" name="add"></q-icon>
        <div class="text-caption">创建报价</div>
    </q-btn>
</q-page-sticky>
</q-page>
</template>

<script>
import {loadQuoteList} from "assets/api/app"
import {
    date
} from "quasar";
export default {
    name: 'quotePage',
    components: {
      QuoteList: () => import("components/QuoteList"),
        CreateQuote:()=>import('components/CreateQuote.vue')
    },
    data() {
        return {
            fabPos: [50, 50],
            isCreateDialog:false,
            quoteList:[],
            pageNum:1,
            pageSize:10,
            isLoad: true,
            isEmpty: true,
            noMoreQuote: false,
            isRefresh: false,
        }
    },
    mounted(){
      this.handleLoadQuoteList()
    },
    methods: {
      handleLoadQuoteList(){
        this.quoteList = [];
          loadQuoteList({
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }).then(res=>{
            console.log(res.data.data);
            let data = res.data.data;
            this.isLoad = false;
                if (data.length == 0) {
                    this.noMoreProject = true;
                    this.isEmpty = true;
                } else if (data.length > 0) {
                    this.isEmpty = false;
                    this.formatQuoteData(data, this.quoteList);
                }

          })
      },
      handleCreateDialog(type) {
            if(type=='reload'){
                this.handleLoadQuoteList()
            }
            this.isCreateDialog = !this.isCreateDialog;

            // console.log(this.$date);
            // this.createQuote.from = this.$date.now();
        },

        moveFab(ev) {
            this.draggingFab = ev.isFirst !== true && ev.isFinal !== true;
            if (this.fabPos[0] - ev.delta.x <= 0) {
                var x = 0;
            } else {
                var x = this.fabPos[0] - ev.delta.x;
            }
            if (this.fabPos[1] - ev.delta.y <= 0) {
                var y = 0;
            } else {
                var y = this.fabPos[1] - ev.delta.y;
            }

            this.fabPos = [x, y];
        },


        handleRefreshQuote(v) {
            this.pageNum += 1;
            console.log("refresh", this.pageNum);

            let reqData = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };

            loadQuoteList(reqData).then((res) => {
                let data = res.data.data;
                if (data.length > 0) {
                    this.isEmpty = false;
                    this.formatQuoteData(data, this.quoteList);
                    this.isRefresh = true;
                } else {
                    this.noMoreQuote = true;
                    this.$refs["quote-list"].$children[0].stop();
                }
            });
        },
        formatQuoteData(data, quoteList) {
            data.forEach((item) => {

                let stime = parseInt(item.stime);
                let etime = parseInt(item.etime);
                let qTime = parseInt(item.qTime)
                let costTotal = parseInt(item.costTotal)
                if (costTotal >= 50000) {
                    item.color = "pink-6";
                } else if (costTotal >= 10000 && costTotal <50000) {
                    item.color = "teal-6";
                } else if (costTotal >= 5000 && costTotal <10000) {
                    item.color = "yellow-8";
                } else if (costTotal <5000) {
                    item.color = "blue-6";
                }
                item.stime = date.formatDate(stime, "YYYY/MM/DD");
                item.etime = date.formatDate(etime, "YYYY/MM/DD");
                item.qTime = date.formatDate(qTime, "YYYY/MM/DD HH:mm");

                quoteList.push(item);
            });
        },
    },
};
</script>
